<template>
  <div class="serach-detail">
    <h3>搜索 {{searchText}}</h3>
    <el-tabs v-model="activeName">
      <el-tab-pane class="customer-no-border-table" label="单曲" name="first">
        <searchSong :songs="songs" :songscount="songscount" />
      </el-tab-pane>
      <el-tab-pane label="歌手" name="second">
        <searchArtist :searchText="searchText" />
      </el-tab-pane>
      <el-tab-pane label="专辑" name="third">
        <searchAlbum :searchText="searchText" />
      </el-tab-pane>
      <el-tab-pane label="歌单" name="fourth">
        <searchPlaylist :searchText="searchText" />
      </el-tab-pane>
      <el-tab-pane label="用户" name="fifth">
        <searchUser :searchText="searchText" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getsearchAPI } from "@/api/search";
import searchSong from "./components/search-song.vue";
import searchPlaylist from "./components/search-playlist.vue";
import searchArtist from "./components/search-artist";
import searchUser from "./components/search-usesr";
import searchAlbum from "./components/search-album.vue";
export default {
  name: "Search-detail",
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchSong,
    searchPlaylist,
    searchArtist,
    searchUser,
    searchAlbum,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      activeName: "first",
      searchText: "",
      // 歌曲属性
      // 全部音乐
      songs: [],
      songscount: 0,
      // 全部歌单 迁移至组件进行数据交互
      // playlists: [],
      // playlistscount: 0,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // 监听路由是否变化
    $route(to, from) {
      if (to.query.text != from.query.text) {
        this.searchText = to.query.text; // 把最新id赋值给定义在data中的id
        this.getsearch(); // 重新调用加载数据方法
      }
    },
  },
  //方法集合
  methods: {
    // handleClick(tab) {
    //   console.log(tab.index);
    // },

    async getsearch() {
      // 清空上次搜索记录
      this.songs = [];
      const data = await getsearchAPI(this.searchText, 100, 0, 1);
      this.songscount = data.data.result.songCount;
      this.songs = [...this.songs, ...data.data.result.songs];
      // for循环获取全部歌曲
      for (
        let limit = 100;
        this.songs.length + 1 < this.songscount;
        limit + 100
      ) {
        const data = await getsearchAPI(this.searchText, 100, limit, 1);
        this.songs = [...this.songs, ...data.data.result.songs];
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.searchText = this.$route.query.text;
    this.getsearch();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document.title = "搜索 - " + this.searchText;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    this.searchText = this.$route.query.text;
    document.title = "搜索 - " + this.searchText;
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.serach-detail {
  margin: 0 auto;
  width: 1200px;
  padding-top: 20px;
  /deep/ .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  // 去除elmentuitab自带的边框
  /*去掉表格单元格边框*/
  :deep(.customer-no-border-table th) {
    border: none;
  }
  /deep/ .customer-no-border-table td,
  /deep/ .customer-no-border-table th.is-leaf {
    border: none;
  }
  /*表格最外边框*/
  /deep/ .customer-no-border-table .el-table--border,
  .el-table--group {
    border: none;
  }
  /*头部边框*/
  /deep/ .customer-no-border-table thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
  /deep/ .customer-no-border-table thead tr th:nth-last-of-type(2) {
    border-right: 0px solid #ebeef5;
  }
  /*表格最外层边框-底部边框*/
  /deep/ .customer-no-border-table .el-table--border::after,
  /deep/ .customer-no-border-table .el-table--group::after {
    width: 0;
  }
  /deep/ .customer-no-border-table::before {
    width: 0;
  }
  /deep/ .customer-no-border-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }
  /deep/ .customer-no-border-table .el-table__header tr th {
    background: #fff;
    color: #333333;
    padding: 3px;
    fontweight: 550;
    height: 36px;
    border: 0px;
    font-size: 15px;
  }
  /deep/.el-table::before {
    height: 0;
  }
}
</style>